<template>
  <div class="c-tab">
    <c-row class="c-tab-btn" less-width="240px">
      <c-col>
        <el-radio-group :value="radio" @input="inputRadio">
          <el-radio-button
            v-for="label in option"
            :key="label"
            :label="label"
          ></el-radio-button>
        </el-radio-group>
      </c-col>
      <c-col less right>
        <slot name="opn" :value="radio"></slot>
      </c-col>
    </c-row>
    <div class="c-tab-body">
      <slot :value="radio"></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: 'CTab',
  components: {},
  props: {
    value: { type: String, default: '' },
    option: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return { radio: this.value }
  },
  computed: {},
  watch: {},
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    inputRadio(v) {
      this.radio = v
      this.$emit('input', v)
    }
  }
}
</script>
<style lang="scss">
.c-tab {
  height: 100%;
  &-btn {
    margin-bottom: 10px;
  }
  &-body {
    height: calc(100% - 42px);
  }
}
</style>
